<template>
    <view>
        <view class="topBox" v-if="bool">
            <view>
                <image src="@/static/img/wode.png" class="picture"></image>
            </view>
            <view>
                <text class="topFont" @click="bool = false">点击登录</text>
            </view>
            <view>
                <image src="@/static/img/wode.png" class="picture"></image>
            </view>
        </view>
		
		<view class="topBox" v-else>
			<view>
				<view>
					<image src="../../subPages/square/static/img/qing.jpg" mode="" class="img"></image>
					<text class="txt">顾客</text>
				</view>
				<view class="name">星河</view>
			</view>
			<view>
				<view>
					<text class="texts">星河溺我的食堂</text>
					<image src="../../static/img/genggai.png" mode="" class="change"></image>
				</view>
				<view class="grades">
					<text class="lv">LV</text>
					<text class="grade">1</text>
				</view>
			</view>
			<view>
				<view>
					<text class="txt">老板</text>
					<image src="../../subPages/square/static/img/qings.jpg" mode="" class="img"></image>
				</view>
				<view class="name">星河溺我</view>
			</view>
		</view>
		
        <view class="miBox">
            <view class="left">
                <view :class="{classify: true, active: i==curClassify}" v-for="classify,i in classifys"
                    @click="curClassify=i">{{ classify }}</view>
                <!-- <view class="classify">心愿清单</view> -->
            </view>
            <view class="right">
                <view class="optionx">
                    <text class="dash">—</text>
                    <text class="classifyName">{{ classifys[curClassify] }}</text>
                    <text class="dash">—</text>
                </view>
                <view class="option">+添加商品</view>
            </view>
        </view>
		
        <view class="bottom">
            <navigator class="button" url="/subPages/restaurant/classify/classify">分类管理</navigator>
            <navigator class="button" url="/subPages/restaurant/managment/managment">添加商品</navigator>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                curClassify: 0,
                classifys: [
                    "默认分类",
                    "心愿清单"
                ],
				bool: true
            }
        },
        onLoad() {

        },
        methods: {

        }
    }
</script>

<style>
    .topBox {
        background-color: #fe4b63;
        height: 200px;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .picture {
        width: 50px;
        height: 50px;
    }

    .topFont {
        color: #fff;
        font-size: 28px;
    }

    .miBox {
        display: flex;
        height: 450px;
    }

    .left {
        width: 33%;
    }

    .right {
        margin: 0 auto;
    }

    .classify {
        background-color: #f2f2f2;
        height: 80px;
        line-height: 80px;
        margin: 2px 0;
        border-radius: 0 10px 10px 0;
        font-size: 20px;
        border-left: 5px solid #ebebeb;
        padding-left: 8px;
    }

    .classify.active {
        border-left: 5px solid #fd4b63;
        background-color: #fff;
    }

    .optionx {
        height: 60px;
        font-size: 20px;
        width: 160px;
        line-height: 60px;
        text-align: center;
    }

    .option {
        height: 70px;
        width: 160px;
        font-size: 20px;
        background-color: #f4f4f4;
        line-height: 70px;
        border-radius: 10px;
        text-align: center;
        color: #c3c3c3;
    }

    .dash {
        font-weight: bold;
        color: #b6b6b6;
    }

    .classifyName {
        margin: 0 6px;
    }

    .bottom {
        display: flex;
        justify-content: space-around;
    }

    .button {
        background-color: #f4f4f4;
        padding: 20px 60px;
        border-radius: 10px;
        color: #ec6c65;

    }

    .buttonx {
        color: #fff;
        background-color: #ec6c65;
    }
	.img {
		width: 18vw;
		height: 18vw;
	}
	.img,.lv {
		border-radius: 50%;
	}
	.change {
		width: 3vw;
		height: 3vw;
	}
	.txt,.name,.texts {
		color: #fff;
	}
	.lv,.grade,.txt {
		background-color: #fff;
		color: #fe4b63;
	}
	.lv,.grade {
		display: inline-block;
		text-align: center;
		width: 5vw;
		height: 5vw;
		font-size: 3vw;
		margin:8vw 0 0;
	}
	.grade {
		width: 8vw;
	}
	.grades {
		text-align: center;
	}
/* 	.grades {
		height: 15vw;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		position: relative;
	} */
	.txt {
		border-radius: 2vw;
		display: inline-block;
		width: 11vw;
		height: 6vw;
		text-align: center;
	}
	.name {
		width: 18vw;
		text-align: center;
	}

</style>